<template>
	<!-- 数字选择框组件 -->
	<div class="mui-numbox" data-numbox-min='1' data-numbox-max='max'>
	  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
	  <input class="mui-numbox-input" type="number" value="1" @change="countChanged" ref="numbox" />
	  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
	</div>
</template>

<script>
	import mui from "../../lib/mui/dist/js/mui.js"
	
	export default{
		mounted() {
			// 初始化数字选择框的组件
			mui(".mui-numbox").numbox()
		},
		methods:{
			countChanged() {
				// 每当文本框数据被改变时，都把最新的数据，通过事件调用，传给父组件
				this.$emit("getcount",parseInt(this.$refs.numbox.value))
				// getcount 是父组件的
			}
		},
		// 父组件向子组件传值，来接收的值
		props:["max"],
		// 来监听数据的变化，来触发值
		watch:{
			'max': function(newVal,oldVal) {
				// 使用 JS API 设置 numbox 的最大值
				mui(".mui-numbox").numbox().setOption('max',newVal)
			}
		}
	}
</script>

<style scoped>
</style>
